<template>

    <div style="background-color: #ffffff;margin-top: -59px;">
        <div class="img-div">
            <div>
                <img src="../../assets/img/logo_purple.png" class="logo-img">
                <img src="../../assets/img/流程.png" class="process-img">
            </div>
        </div>
        <div style="align-items: center">
            <div class="root-provider">
                <div style="border: 0px solid black; position: relative;
                    box-sizing: border-box; display: flex;
                    flex-direction: column; align-content: flex-start; flex-shrink: 0;align-items: center">
                    <div style="width: 1000px;">
                        <div class="header-wrapper">
                            <h2 class="header-title">订单信息</h2>
                        </div>
                        <div class="item-headers-wrap">
                            <el-image
                                    class="works-img"
                                    :src="order.filename"
                                    @click="clickImg">
                            </el-image>
                            <el-card style="height: 400px">
                                <h2 class="info-demands">{{order.demands.demands}}</h2>


                                <div style="margin-top: 10px;">
                                    <span class="label-label">总价</span>
                                    <span class="price">{{order.totalPrice}}</span>&nbsp;元
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">订单详情</span>
                                    <span class="">{{order.demands.requirements}}</span>
                                </div>
                                <div style="width: 100%;margin-bottom: 12px;border-top: 1px #A7A2A2 dotted;"></div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">分类</span>
                                    <span>{{order.demands.categoryName}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">风格</span>
                                    <span>{{order.demands.style}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">规格</span>
                                    <span>{{order.demands.specifications}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">格式</span>
                                    <span>{{order.demands.format}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">颜色模式</span>
                                    <span>{{order.demands.color}}</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span class="label-label">反馈间隔</span>
                                    <span>{{order.demands.feedbackInterval}}</span>
                                </div>
                                <div style="width: 100%;border-top: 1px #A7A2A2 dotted;"></div>

                                <div style="margin-top: 10px;">
                                    <span class="label-label">订单编号</span>
                                    <span class="">{{order.orderNum}}</span>
                                </div>
                            </el-card>


                        </div>

                    </div>

                    <el-card style="margin-top: 10px;width: 1000px;">
                        <h2 class="info-demands">回复评价:</h2>
                        <span style="font-size:14px;font-weight: 600;">需求者评价：</span>
                        {{order.orderComment.orderCommentContent}}
                        <br>
                        <br>
                        <span style="font-size:14px;font-weight: 600;">评价内容:</span>
                        <el-input placeholder="请输入对该订单的评价"
                                  type="textarea"
                                  maxlength="500"
                                  :autosize="{minRows: 3}"
                                  show-word-limit
                                  v-model="replyContent"
                                  style="margin-top: 10px;">
                        </el-input>
                    </el-card>

                </div>
                <div class="submitOrder-container">
                    <div class="wrapper">

                        <el-button class="go-btn"
                                   style="background-color: rgb(173,179,251);"
                                   @click="submitComment">提交评论
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="visible" :close-on-click-modal="true">
            <img :src="order.filename">
        </el-dialog>
    </div>

</template>

<script>

    import {addOrderComment, getOrderByOrderId, replyComment} from "../../assets/api/ordersApi";
    import {getOrderItemByOrderNum} from "../../assets/api/orderItemApi";

    export default {
        data() {
            return {
                order: {},
                visible: false,
                textarea: '',
                radio: '1',
                replyContent: '',
                orderItem: '',
                checked: true,
            }
        },
        methods: {
            getOrders() {
                let data = {};
                data.orderId = this.$route.query.id;
                getOrderByOrderId(data).then((res) => {
                    if (res.code === 200) {
                        this.order = res.data;
                        this.getOrderItem();
                    }
                })
            },
            getOrderItem() {
                let data = {};
                data.orderNum = this.order.orderNum;
                getOrderItemByOrderNum(data).then((res) => {
                    this.orderItem = res.data;
                })
            },
            submitComment() {
                let data = {};
                data.orderId = this.order.orderComment.orderId;
                data.replyContent = this.replyContent;
                replyComment(data).then((res)=>{
                    if (res.code === 200){
                        this.$message.success('评价成功！');
                    }
                    this.$router.replace(`/myOrders`)
                })
            },
            clickImg() {
                this.visible = true;
            },
        },


        created() {
            this.getOrders();
        }
    }

</script>

<style scoped>

    .img-div {
        width: 1000px;
        position: relative;
        display: flex;
        margin: 0 auto 0 auto;
        text-align: center;
    }

    .process-img {
        width: 70%;
        height: 80%;
        margin-top: 30px;
        margin-left: 90px;
    }

    .works-img {
        width: 400px;
        height: 400px;
        border: 2px #f4f4f4 solid;
        float: left;
        cursor: pointer;
        margin-right: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .logo-img {
        float: left;
        z-index: 9;
        padding-top: 28px;
        height: 90px;
        line-height: 64px;
        position: relative;
    }

    .root-provider {
        min-height: 400px;
    }

    .header-wrapper {
        position: relative;
        margin-bottom: 15px;
    }

    .header-wrapper .header-title {
        line-height: 25px;
        color: #333;
        font-weight: 700;
        font-size: 14px;
    }

    .info-demands {
        line-height: 25px;
        font-weight: 700;
        padding: 3px 0;
        color: #000;
        font-size: 16px;
    }

    .label-label {
        float: left;
        color: #999;
        margin-right: 50px;
        width: 60px;
    }

    .price {
        font-size: 25px;
        vertical-align: center;
        font-weight: 700;
        color: #adb3fb;
    }

    .item-headers-wrap {
        margin-top: 15px;
        color: #6c6c6c;
    }

    .submitOrder-container {
        text-align: right;
        margin-top: -1px;
    }

    .submitOrder-container .wrapper {
        display: inline-block;
        padding: 0 0 5px 5px;
    }

    a {
        text-decoration: none;
        cursor: pointer;
    }

    .submitOrder-container .go-btn {
        display: inline-block;
        width: 182px;
        height: 39px;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        margin-right: 280px;
        margin-top: 10px;
    }

    .comment-input {
        margin-top: 10px;
    }

    /deep/ .el-input__inner {
        line-height: 101px;
        height: 101px;
    }

</style>
